{% extends webapp_config['LAYOUT'] %}

{% block meta_title %}Install Linux apps using the Snap Store | Snapcraft{% endblock %}

{% block meta_description %}Find and install the best Linux software for all major Linux distributions.{% endblock %}

{% block meta_schema %}
  <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@id": "https://snapcraft.io/#website",
      "@type": "WebSite",
      "name": "Snapcraft",
      "url": "https://snapcraft.io{{ self.meta_path() }}",
      "potentialAction": {
        "@type": "SearchAction",
        "target": "https://snapcraft.io/search?q={q}",
        "query-input": "required name=q"
      }
    }
  </script>
{% endblock %}

{% block content %}
  {% include 'partials/search-bar.html' %}

  <section class="p-strip is-shallow">
    {% if webapp_config['STORE_INSTALL_INSTRUCTIONS'] %}
      <div class="row">
        <h3>Installing apps</h3>
        <p>To configure a snap enabled system to use {{ webapp_config['STORE_QUERY'] }}:</p>
        <pre><code>echo "UBUNTU_STORE_ID={{ webapp_config['STORE_QUERY'] }}" | sudo tee -a /etc/environment
sudo service snapd restart</code></pre>
      </div>
      <div class="row">
        <hr />
      </div>
    {% endif %}
    {% if webapp_config['STORE_INTRO'] %}
      <div class="row">
        {{ webapp_config['STORE_INTRO']|safe }}
      </div>
      <div class="row">
        <hr />
      </div>
    {% endif %}

    <div class="row">
      {% for snap in snaps %}
        <div class="col-3">
          <a class="p-media-object" href="/{{ snap.package_name }}">
            <span class="p-media-object__image">
              {% if snap.icon_url %}
                <img class="p-heading-icon__img" src="{{ snap.icon_url }}" alt="">
              {% else %}
                <img class="p-heading-icon__img" src="https://assets.ubuntu.com/v1/be6eb412-snapcraft-missing-icon.svg" alt="">
              {% endif %}
            </span>
            <span class="p-media-object__details">
              <h4>{{ snap.title }}</h4>
            </span>
          </a>
        </div>
      {% endfor %}
    </div>
  </section>
{% endblock %}

{% block scripts_includes %}
  <script src="{{ static_url('js/dist/public.js') }}" defer></script>
{% endblock %}

{% block scripts %}
  <script>
    window.addEventListener("DOMContentLoaded", function() {
      Raven.context(function () {
        snapcraft.public.storeCategories();
      });
    });
  </script>
{% endblock %}
